<template>
  <div class="flex flex-column height purchasingServices">
    <header-top
      class="head"
      ref="header"
      :TxtHeader="TxtHeader"
      style="border-bottom:1px solid #f8f8f8"
      @leftClick="back"
    ></header-top>
    <div class="content_main">
      <div class="content_img">
        <img src="./img/icon_pay.png" />
      </div>
      <div class="content_cont">
        <div class="cont_left">
          <div class="left_img"><img src="./img/icon_zx.png" /></div>
          <div class="left_text">
            <span>图文问诊</span>
            <i>¥20.00/次</i>
          </div>
        </div>
        <div class="cont_right">
          <van-checkbox
            checked-color="#08d6c6"
            v-model="checked"
          ></van-checkbox>
        </div>
      </div>
    </div>
    <div class="bottom">
      <button class="active">
        立即支付
      </button>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
export default {
  name: "purchasingServices",
  components: {
    HeaderTop
  },
  data() {
    return {
      checked: "",
      TxtHeader: {
        //头部设置
        color: "#333", //头部中间文字颜色
        title: "购买流程",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#333"
        }
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.purchasingServices >>> .van-checkbox {
  padding-top: 50%;
}
</style>
<style lang="less" scoped>
.head {
  background: #fff;
}
.purchasingServices {
  background: #fff;
  .content_main {
    height: calc(100% - 1.24rem);
    padding: 0.15rem;
    .content_img {
      margin-bottom: 0.1rem;
      img {
        width: 3.45rem;
        background-size: 100%;
      }
    }
    .content_cont {
      display: flex;
      .cont_left {
        display: flex;
        .left_img {
          img {
            width: 0.5rem;
            background-size: 100%;
          }
        }
        .left_text {
          font-size: 0.18rem;
          margin-left: 0.11rem;
          span {
            color: #333;
            margin-bottom: 0.03rem;
            display: block;
          }
          i {
            color: #fa6400;
          }
        }
      }
      .cont_right {
        margin-left: auto;
      }
    }
  }
  .bottom {
    padding: 0.15rem 0.2rem;
    background: #fff;
    font-size: 0.18rem;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.06);
    button {
      width: 100%;
      height: 0.44rem;
      border: 0;
      border-radius: 0.44rem;
      background: #f5f5f5;
      color: #ccc;
    }
    button.active {
      color: #fff;
      background-image: linear-gradient(to left, #02c0cb, #0adda4);
    }
  }
}
</style>
